<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__dept">
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
        @sort-change="dataListSortChangeHandle"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          min-width="150"
        ></el-table-column>
        <!-- <el-table-column prop="content" label="内容" header-align="center" align="center" min-width="300">
               <template slot-scope="scope">
                  <p class="p">{{scope.row.content}}</p>
              </template>
            </el-table-column> -->
        <el-table-column
          prop="type"
          label="类型"
          :show-overflow-tooltip="true"
          align="center"
          min-width="120"
        >
          <template slot-scope="scope">
            {{
              scope.row.type == 0
                ? "景点"
                : scope.row.type == 1
                ? "美食"
                : scope.row.type == 2
                ? "住宿"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="picList"
          label="图片"
          header-align="center"
          align="center"
          min-width="120px"
        >
          <template slot-scope="scope" v-if="scope.row.picList">
            <img
              :src="scope.row.picList[0]"
              style="width: 70px; height: 70px"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="releaseTime"
          label="发布时间"
          header-align="center"
          min-width="120px"
          align="center"
        ></el-table-column>
        <el-table-column
          :label="$t('handle')"
          fixed="right"
          header-align="center"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="$hasPermission('scenic:tripintrodution:getOne')"
              size="small"
              @click="lookDetail(scope.row.id)"
              >详情</el-button
            >
            <el-button
              type="text"
              v-if="$hasPermission('scenic:tripintrodution:Approved')"
              size="small"
              @click="checkData(scope.row.id)"
              >审核</el-button
            >
            <el-button
              type="text"
              v-if="$hasPermission('scenic:tripintrodution:pcdelete')"
              size="small"
              @click="deleteHandle(scope.row.id)"
              >{{ $t("delete") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗, 新增 / 修改 -->
      <look-detail
        v-if="lookDetailVisible"
        ref="lookDetail"
        @refreshDataList="getDataList"
      ></look-detail>
    </div>
    <!-- 审核 -->
    <el-dialog title="审核" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="check" :rules="dataRule" ref="check">
        <el-form-item
          label="审核结果"
          label-width="120px"
          prop="state"
          required
        >
          <el-select
            v-model="check.state"
            placeholder="请选择审核结果"
            clearable
            style="width: 100%"
          >
            <el-option label="通过" :value="1"></el-option>
            <el-option label="不通过" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="原因" label-width="120px" v-if="check.state === 0" prop="checkFeedback">
          <el-input v-model="check.checkFeedback"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmCheck()">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import lookDetail from "./list-add-or-update";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/scenic/tripintrodution/page",
        deleteURL: "/scenic/tripintrodution",
        getDataListIsPage: true,
        deleteIsBatch: true,
      },
      dialogFormVisible: false,
      check: {
        state: "",
        id: "",
        checkFeedback: "",
      },
      dataForm: {
        publisherType: 5,
        state: 2,
      },
    };
  },
  components: {
    lookDetail,
  },
  computed: {
    dataRule() {
      return {
        state: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        checkFeedback: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  methods: {
    checkData(id) {
      this.dialogFormVisible = true;
      this.check.id = id;
    },
    confirmCheck() {
      // if (this.check.state === 0 && !this.check.checkFeedback) {
      //   return this.$message.error("请输入审核不通过的原因");
      // }
      this.$refs["check"].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.$http
          .put("/scenic/tripintrodution/Approved", this.check)
          .then((res) => {
            if (res.data.code !== 0) {
              return this.$message.error(res.data.msg);
            }
            this.dialogFormVisible = false;
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 500,
              onClose: () => {
                this.$refs["check"].resetFields();
                this.getDataList();
              },
            });
          });
      });
    },
  },
};
</script>
<style scoped>
.p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>